<template>
	<view>
		<view class="status-box" style="display: flex;">
			<view style="font-size: 16px;">{{status | showStatus}}</view>
			<view style="padding: 7rpx 15rpx;" v-if="status==0">
				<span>{{fen}}</span>分钟 <span>{{miao}}</span>秒后自动取消订单
			</view>
		</view>
		<view class="dizhi-box" v-if="type==1">
			<view class="dizhi-info">
				<view>收货人：{{address.adName}}</view>
				<view>收货地址：<text class="moren">[默认]</text> {{address.adDetail}}</view>
			</view>
			<view class="tel">
				{{address.adPhone}}
			</view>
		</view>
		<view class="dizhi-box" v-if="type!=1">
			<view class="dizhi-info">
				<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
					<view>联系人：{{zitiAddress.zitiName}}</view>
					<view>{{zitiAddress.phone}}</view>
				</view>
				<view>自提地址：{{zitiAddress.place+zitiAddress.placeDetail}}</view>
				<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
					<view style="background-color: orange;border-radius: 20rpx;padding: 0 10rpx 0 10rpx;" @click="daohang(zitiAddress.zitiId)">导航： 去这里</view>
					<view style="color: #007aff;" @click="callUp()">拨打电话</view>
				</view>
			</view>
		</view>
		<view class="tips">
			商品信息
		</view>
		<view class="goods-box" @click="goGoodsDetail()">
			<view class="goods-info">
				<view>
					<image :src="switchImg(goods.gimages)" class="goods-img" mode="heightFix"></image>
				</view>
				<view class="goods-name">
					<view>
						<view>{{goods.gname}}</view>
						<view class="qian">{{goods.gprice}}</view>
					</view>
					<view>
						<view class="jianjie">{{guige}}</view>
						<view>×1</view>
					</view>
				</view>
			</view>
		</view>
		<view class="jiage-box">
			<view class="allmoney">
				<view>商品总价</view>
				<view class="qian">{{goods.gprice}}元</view>
			</view>
			<view class="allmoney" v-if="type==1">
				<view>运费(快递)</view>
				<view class="qian">{{yunfei}}元</view>
			</view>
			<view class="allmoney">
				<view>订单总价</view>
				<view class="qian">{{orderSum}}元</view>
			</view>
		</view>
		<view class="xupay">
			<view class="allmoney">
				<view>需付款</view>
				<view class="qian">{{orderSum}}元</view>
			</view>
		</view>
		<view class="status-box">
			<view class="status-btn" @click.stop="shanOrder(orid)" v-show="status==0">删除订单</view>
			<view class="status-btn" @click.stop="checkWuliu(orid)" v-show="status==2 && type==1">查看物流</view>
			<view class="status-btn"  @click.stop="fukuanOrShouhuo(status,orid,gid)">{{status | showStatus2}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orid:"",		// 订单编号
				addressId:"",	// 收货地址id
				status:0,		// 状态
				shouName:"",	// 收货人姓名
				shouTel:"",		// 收货人电话
				shouDetail:"",	// 收货人详细地址
				orderSum:0,		// 订单总价
				yunfei:0,		// 运费
				goods:{	},		// 订单的商品,
				guige:"",		// 商品的规格
				gid:"",			// 商品编号
				danhao:"",		// 快递单号
				type:0,			// 订单配送类型
				odlist:[],		 //订单信息
				address:[],		 //收货地址信息
				zitiAddress:[],	 //自提地址信息
				goodsorders:[],	 //订单信息
				zongjia:0,		// 订单总价
				orderTime:'',	 //订单时间
				systemNow:'',	 //系统当前时间
				fen:'00',		 //倒计时分钟
				miao:'00',		 //倒计时秒钟
			}
		},
		methods: {
			//跳转商品详情
			goGoodsDetail(){
				uni.navigateTo({
					url:'../../quanfan/GoodsDetail?gid='+this.gid
				})
			},
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// 查看物流
			checkWuliu(orId){
				console.log("全返商城查物流："+orId)
				this.$http.get('/xielianorder.do/getWuliu',{
					orid:orId
				}).then(res => {
					if(res.data.code==200){
						let src = 'https://m.kuaidi100.com/app/query/?coname=xielian&nu='+res.data.data.id+"&com="+res.data.data.pinyin+"&callbackurl=";
						uni.navigateTo({
							url:'../../quanfan/MyWebview/MyWebview?url='+encodeURIComponent(src)
						})
					}else{
						this.$u.toast("此订单有误!请联系客服人员")
					}
				})
			},
			//点击导航了
			daohang(zitiId){
				console.log("点击导航了")
				uni.navigateTo({
					url:this.host+'/daohang/goGetCurrentPositionViewZitidian?zitiId='+zitiId
				})
			},
			//拨打电话
			callUp(){
				uni.makePhoneCall({
				    phoneNumber: this.zitiAddress.phone //仅为示例
				});
			},
			// 手动删除订单
			shanOrder(id){
				// xielianorder.do?p=deleteOrder
				let userid = uni.getStorageSync("usersId")	;
				uni.showModal({
					title:"删除订单?",
					success: (res) => {
						if(res.confirm){
							this.$http.get("/xielianorder.do?p=deleteOrderByMini",{
								orid:id,
								userid:userid
							}).then(res=>{
								if(res.data=='success'){
									this.$u.toast("删除成功");
									uni.$emit('getOrderByGroup');
									uni.$emit('checkUserInfo');
									setTimeout(function(){
										uni.switchTab({
											url:'../index'
										})
									},500)
								}
							});
						}
					}
				})
			},
			// 付款或收货快捷键
			fukuanOrShouhuo(s,id,gid){
				if(s==0){
					// xielianorder.do?p=payAgain&orid="+oid+"&orderId="+orid+"&id=submit-order.html";
					uni.navigateTo({
						url:'../../quanfan/SubmitOrder?orid='+id+'&gid='+gid,
					})
				}else if(s==2){
					// xielianorder.do?p=editOrderStatus
					let userid = uni.getStorageSync("usersId")	;
					uni.showModal({
						title:"确定收货?",
						success: (res) => {
							if(res.confirm){
								this.$http.get("/xielianorder.do?p=editOrderStatus",{
									orid:id,
								}).then(res=>{
									if(res.data=='3'){
										this.$u.toast("收货成功");
										uni.$emit('getOrderByGroup');
										uni.$emit('checkUserInfo');
										setTimeout(function(){
											uni.switchTab({
												url:'../index'
											})
										},500)
									}
								});
							}
						}
					})
				}
			},
			//未支付订单30分钟倒计时
			countTime() {
				// 获取系统当前时间
				this.$http.get('/ppOrder/getTime',{
					
				}).then(res => {
					this.systemNow = res.data.data;
				})
				if(this.systemNow==null || this.systemNow=="" || this.systemNow==0 || this.systemNow==1){
					this.fen = '30'
					this.miao = '00'
					//递归每秒调用countTime方法，显示动态时间效果
					setTimeout(()=>{
						this.countTime()
					},1000)
				}else{
					// this.systemNow++;
					//设置截止时间
					let str = this.orderTime;
					let endDate = new Date(str);
					let end = endDate.getTime()+(1000*60*30);
					//时间差
					let leftTime = end-this.systemNow;
					//定义变量 d,h,m,s保存倒计时的时间
					let m=0,s=0;
					m = Math.floor(leftTime/1000/60%60);
					s = Math.floor(leftTime/1000%60);
					if(m==0 && s ==0){
						//超过30分钟未支付跳主页面
						uni.switchTab({
							url:'../index'
						})
					}
					//将倒计时赋值到div中
					this.fen = m;
					this.miao = s;
					//递归每秒调用countTime方法，显示动态时间效果
					setTimeout(()=>{
						this.countTime()
					},1000)
				}
			},
		},
		onLoad(opt) {
			// xielianorder.do?p=getAllOrderDetail
			this.orid= opt.orid;
			this.addressId = opt.adid;
			this.type = opt.orPeisongtype;
			this.status = opt.orStatus;
			let uid = uni.getStorageSync('usersId')	;
			this.$http.get("/xielianorder.do?p=getAllOrderDetail",{
				orid:opt.orid,
				addressid:opt.adid,
				type:opt.orPeisongtype,
				userid:uid
			}).then(res=>{
				console.log(res);
				for (let key in res.data) {
					if(key == "odlist"){
						this.odlist = res.data[key]
					}
					if(key == "address"){
						this.address = res.data[key]
					}
					if(key == "zitiaddress"){
						this.zitiAddress = res.data[key]
					}
					if(key == "goodsorders"){
						this.goodsorders = res.data[key];
						this.zongjia = this.goodsorders.orPrice*1;
						this.orderTime = this.goodsorders.orTime;
						// if(this.orPeisongtype==1){
						// 	this.allMoney = (this.goodsorders.orPrice*1 - this.goodsorders.orYunfei*1).toFixed(2);
						// }else{
						// 	this.allMoney = this.goodsorders.orPrice*1;
						// }
					}
				}
				
				// this.status = res.data.goodsorders.orStatus;
				this.gid = res.data.goodsorders.goodsorderdetails[0].goods.gid;
				if(res.data.address!=null && res.data.address!="" && res.data.address!=undefined){
					this.shouName = res.data.address.adName;
					this.shouTel = res.data.address.adPhone;
					this.shouDetail = res.data.address.adDetail;
				}
				this.yunfei= res.data.goodsorders.orYunfei;
				this.orderSum= res.data.goodsorders.orPrice;
				this.goods.gname = res.data.odlist[0].goods.gname
				this.goods.gprice = res.data.goodsorders.orPrice;
				this.goods.gimages= res.data.odlist[0].goods.gimages;
				this.danhao =res.data.goodsorders.orRecipient;
				if(res.data.goodsorders.goodsorderdetails[0].guiges){
					let reg = /{/g;
					let reg2 = /}/g;
					this.guige = res.data.goodsorders.goodsorderdetails[0].guiges.replace(reg,'').replace(reg2,'');
				}
			});
			if(opt.orStatus == 0){
				//未支付订单30分钟倒计时
				this.countTime()
			}
		},
		filters:{
			showStatus(s){
				if(s=='0')
					return "您还未支付订单";
				else if(s=='1')
					return "等待商家发货";
				else if(s=='2')
					return "亲，赶紧收货了";
				else if(s=='3')
					return "交易结束";
			},
			showStatus2(s){
				if(s=='0')
					return "立即支付";
				else if(s=='1')
					return "待发货";
				else if(s=='2')
					return "确认收货";
				else if(s=='3')
					return "已收货";
			}
		},
	}
</script>

<style scoped>
	.status-box,.dizhi-box,.goods-box{
		background-color: white;
		padding: 20rpx;
	}
	.dizhi-box{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.tips{
			margin-top: 20rpx;
		background-color: white;
		padding-top: 20rpx;
		padding-left: 20rpx;
		font-size: 22rpx;
	}
	.dizhi-box .dizhi,.dizhi-box .mapdot{
		flex: 1;
		margin-right: 20rpx;
	}
	.dizhi-box .dizhi-info{
		flex: 5;
	}
	.moren{
		color: red;
	}
	.dizhi-box .tel{
		flex: 2;
	}
	.goods-info{
		display: flex;
		padding: 10rpx;
		height: 140rpx;
		align-items: flex-start;
		color: #111111;
	}
	.goods-info>view{
		flex: 1;
	}
	.goods-name>view{
		display: flex;
		justify-content: space-between;
	}
	.goods-info>view:nth-child(2){
		flex: 4;
	}
	.goods-info .goods-img{
		height: 100rpx;
		width: 100rpx;
	}
	.qian::before{
		content: '￥';
	}
	.allmoney{
		display: flex;
		padding: 10rpx 20rpx;
		justify-content: space-between;
	}
	.allmoney:last-child{
		padding: 20rpx ;
		background-color: white;
		margin-top: 10rpx;
	}
	.jiage-box .allmoney:last-child{
		margin-top: 0rpx;
		padding: 20rpx 20rpx;
		padding-top: 10rpx;
	}
	.jiage-box{
		margin-top: 10rpx;
		background-color: white;
		padding: 10rpx 0rpx;
	}
	.jiage-box .allmoney{
		color: #ccc;
	}
	.jiage-box .allmoney:last-child{
		color: #111;
	}
	.xupay .allmoney:last-child .qian{
		color: #FF7900;
	}
	.jianjie{
		color: #CCCCCC;
	}
	.status-box{
		margin-top: 10rpx;
		display: flex;
		justify-content: flex-end;
		padding-right:20rpx;
		font-size: 24rpx;
	}
	.status-box:first-child{
		justify-content: flex-start;
	}
	.status-btn{
		padding: 10rpx 20rpx;
		background-color: white;
		color: #FF7900;
		border-radius: 40rpx;
		border: 2rpx solid #FF7900;
	}
	.status-btn:first-child{
		margin-right: 10rpx;
		color: #111;
		border-color: #111;
	}
	.status-btn:nth-child(2){
		margin-right: 10rpx;
		color: #111;
		border-color: #111;
	}
</style>
